<template>
  <div class="echartsright view">
    <div class="box flex-1" >
      <div class="box_1" style="text-align: center;">{{ (selectData && selectData.N) || '- -' }}{{ (selectData && (selectData.M + selectData.S + selectData.C)) || '- -' }}</div>
        <div class="p-l-30 p-r-30 p-t-10 p-b-10">
          <div class="view flex-row align-center">
            <div class="fz-18 c_fff min80 m-r-70">卖五</div>
            <div class="fz-18  m-r-20 w70" :class="selectData.ZF  >= 0 ? 'color_r' : 'color_g'">{{ selectData.S5 || '- -' }}</div>
            <div class="fz-18 box_color">{{ selectData.S5V || '- -' }}</div>
          </div>
          <div class="view flex-row align-center m-t-5">
            <div class="fz-18 c_fff min80 m-r-70">卖四</div>
            <div class="fz-18  m-r-20 w70" :class="selectData.ZF  >= 0 ? 'color_r' : 'color_g'">{{ selectData.S4 || '- -' }}</div>
            <div class="fz-18 box_color">{{ selectData.S4V || '- -' }}</div>
          </div>
          <div class="view flex-row align-center m-t-5">
            <div class="fz-18 c_fff min80 m-r-70">卖三</div>
            <div class="fz-18  m-r-20 w70" :class="selectData.ZF  >= 0 ? 'color_r' : 'color_g'">{{ selectData.S3 || '- -' }}</div>
            <div class="fz-18 box_color">{{ selectData.S3V  || '- -' }}</div>
          </div>
          <div class="view flex-row align-center m-t-5">
            <div class="fz-18 c_fff min80 m-r-70">卖二</div>
            <div class="fz-18  m-r-20 w70" :class="selectData.ZF  >= 0 ? 'color_r' : 'color_g'">{{ selectData.S2 || '- -' }}</div>
            <div class="fz-18 box_color">{{ selectData.S2V || '- -' }}</div>
          </div>
          <div class="view flex-row align-center m-t-5">
            <div class="fz-18 c_fff min80 m-r-70" style="transform: scale(1.3);">卖一</div>
            <div class="fz-18  m-r-36 w70" style="transform: scale(1.3);" :class="selectData.ZF  >= 0 ? 'color_r' : 'color_g'">{{ selectData.S1 || '- -' }}</div>
            <div class="fz-18 box_color" style="transform: scale(1.3);">{{ selectData.S1V || '- -' }}</div>
          </div>
        </div>

        <div class="p-l-30 p-r-30 p-t-5" style="border-top: 1px solid red;">
          <div class="view flex-row align-center m-t-5">
            <div class="fz-18 c_fff min80 m-r-70" style="transform: scale(1.3);">买一</div>
            <div class="fz-18  m-r-36 w70" style="transform: scale(1.3);" :class="selectData.ZF  >= 0 ? 'color_r' : 'color_g'">{{ selectData.B1 || '- -' }}</div>
            <div class="fz-18 box_color" style="transform: scale(1.3);">{{ selectData.B1V || '- -' }}</div>
          </div>
          <div class="view flex-row align-center m-t-5">
            <div class="fz-18 c_fff min80 m-r-70">买二</div>
            <div class="fz-18  m-r-20 w70" :class="selectData.ZF  >= 0 ? 'color_r' : 'color_g'">{{ selectData.B2 || '- -' }}</div>
            <div class="fz-18 box_color">{{ selectData.B2V  || '- -' }}</div>
          </div>
          <div class="view flex-row align-center m-t-5">
            <div class="fz-18 c_fff min80 m-r-70">买三</div>
            <div class="fz-18  m-r-20 w70" :class="selectData.ZF  >= 0 ? 'color_r' : 'color_g'">{{ selectData.B3 || '- -' }}</div>
            <div class="fz-18 box_color">{{ selectData.B3V || '- -' }}</div>
          </div>
          <div class="view flex-row align-center m-t-5">
            <div class="fz-18 c_fff min80 m-r-70">买四</div>
            <div class="fz-18  m-r-20 w70" :class="selectData.ZF  >= 0 ? 'color_r' : 'color_g'">{{ selectData.B4 || '- -'  }}</div>
            <div class="fz-18 box_color">{{ selectData.B4V || '- -' }}</div>
          </div>
          <div class="view flex-row align-center m-t-5">
            <div class="fz-18 c_fff min80 m-r-70">买五</div>
            <div class="fz-18  m-r-20 w70" :class="selectData.ZF  >= 0 ? 'color_r' : 'color_g'">{{ selectData.B5 || '- -' }}</div>
            <div class="fz-18 box_color">{{ selectData.B5V || '- -' }}</div>
          </div>
        </div>
      </div>
      <div class="box3_border flex-1" style="border-top:1px solid red;border-left:1px solid red;" >
        <div class="box_3">
          <div>涨跌</div>
          <div v-if="selectData && selectData.N">
            <div v-if="selectData.N.indexOf('日元') > -1" :class="selectData.P * (selectData.ZF * 0.01) >= 0 ?'color_r':'color_g'">{{ ((selectData.P * (selectData.ZF * 0.01)).toFixed(7) || 0) || '- -' }}</div>
          <div v-else-if="selectData.N.indexOf('欧元') > -1" :class="selectData.P * (selectData.ZF * 0.01) >= 0 ?'color_r':'color_g'">{{ ((selectData.P * (selectData.ZF * 0.01)).toFixed(5) || 0) || '- -' }}</div>
          <div v-else :class="selectData.P * (selectData.ZF * 0.01) >= 0 ?'color_r':'color_g'">{{ ((selectData.P * (selectData.ZF * 0.01)).toFixed(3) || 0) || '- -' }}</div>
          </div>
          
        </div>
        
         <div class="box_3">
          <div>最新</div>
          <div class="box_color2">{{ selectData.P || '- -' }}</div>
        </div>

        <div class="box_3">
          <div>总手</div>
          <div class="box_color">
            {{ (selectData.V && selectData.V.toFixed(0) )|| '- -' }}
          </div>
        </div>
        <div class="box_3">
          <div>持仓</div>
          <div class="box_color">{{ (selectData.HD && selectData.HD.toFixed(0)) || '- -' }}</div>
        </div>
        <div class="box_3">
          <div>开盘</div>
          <div>{{ selectData.O || '- -' }}</div>
        </div>
        <div class="box_3">
          <div>最低</div>
          <div>{{  selectData.L || '- -' }}</div>
        </div>
        <div class="box_3">
          <div>幅度</div>
          <div>{{ selectData.ZF || '- -' }}%</div>
        </div>

        <div class="box_3">
          <div>昨收</div>
          <div class="box_color2">
            {{ selectData.YC || '- -' }}
          </div>
        </div>
        <div class="box_3">
          <div>昨持</div>
          <div class="box_color2">
            {{ selectData.YHD || '- -' }}
          </div>
        </div>
       
      <div class="box_3">
          <div>昨结</div>
          <div class="box_color2">{{ selectData.YJS || '- -' }}</div>
        </div>

        <div class="box_3">
          <div>最高</div>
          <div>{{ selectData.H || '- -' }}</div>
        </div>
      </div>
      <div class="box_4 flex-1" style="border-top:1px solid red;border-left:1px solid red;">
        <div class="box_4_1">
          <span>时间</span>
          <span style="text-align: right;">价格</span>
          <span style="text-align: right;">现手</span>
        </div>

        <div class="box_4_1" style="color:#fff;" v-for="(item, index) in itemlist.slice(-13)" :key="index">
          <span>{{ item.ctmfmt || '--' }}</span>
          <span style="color:#00ff00;text-align: right;">{{ parseFloat((item.P) || 0) || '- -' }}</span>
          <span style="text-align: right;">{{ parseFloat((item.V) || 0).toFixed(0) || '- -' }}</span>
        </div>

      </div>
    </div>
  
</template>
<script>
import { mapState } from 'vuex';
import moment from 'moment'
export default {
  computed: mapState({
    // selectData: state => state.trade.selectData,/* 当前选中股指*/
    select: state => state.trade.select /* 当前选中股指Code */,
    symbol: state => state.trade.symbol /* 全部行情 */,
    symbos: state => state.trade.symbos /* 当前页面显示杨青 */,
    ticket: state => state.trade.ticket /* 推送数据 */
  }),
  watch: {
    select(val) {
      this.selectitem = val;
    },
    ticket(val) {
      // var listarr = [];
      let currentItem = val.find( item => { 
          return  item.M + item.S + item.C == this.select
        })
        this.selectData = currentItem
        currentItem.ctmfmt = moment.unix(currentItem.Tick).format('HH:mm')
        let i = this.itemlist.findIndex( item => currentItem.ctmfmt == item.ctmfmt)
        if (i > -1) {
          this.$set(this.itemlist, i,currentItem)
          // this.itemlist[i] = currentItem
        } else {
          this.itemlist.push(currentItem);
        }
        this.itemlist = this.itemlist.sort( (a,b) => {
          return b.Tick - a.Tick 
        }).map( item => item)
      // if(this.itemlist.length == 13){
      //   this.itemlist2=this.itemlist.slice();
      //   this.itemlist2.slice(-13);
      // }
    }
  },
  created: function() {
    // console.log(this.select);
    this.selectitem = this.select;
  },
  data() {
    return {
      selectitem: {},
      selectData: {},
      itemlist: [],
      itemlist2: []
    };
  },
  mounted() {
    this.selectitem = this.select;
  },
  methods: {}
};
</script>
<style scoped>
/* 最外层盒子 */

.echartsright {
  height: 100%;
}
.m-r-20 {margin-right: 32px;}
.box {
  width: 100%;
  height: 100%;
  background: #000;
  border-left: 1px solid red;
  border-right: 2px solid red;
  font-size: 16px;
}
.box_1 {
  border-bottom: 1px solid red;
  padding: 5px 8px;
  color: yellow;
  font-size: 20px;
  font-weight: bold;
}
.m-r-70 {
  margin-right: 20%;
}
.min80 {min-width: 38px;}
.box2_border {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-content: space-around;
  align-items: center;
  border-bottom: 1px solid red;
  box-sizing: border-box;
  padding: 2px 5px;
}
.box_2 {
  width: 50%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  padding: 5px 3px 5px 7px;
  font-size: 14px;
}
.box_2 div:nth-child(1) {
  color: #fff;
}
.box_2 div:nth-child(2) {
  color: #fff;
}
.box_2 div:nth-child(3) {
  color: yellow;
}
.box3_border {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-content: space-around;
  align-items: center;
  width: 100%;
  height: auto;
  border-bottom: 1px solid red;
  box-sizing: border-box;
}
.box_3 {
  width: 50%;
  color: #fff;
  padding: 5px 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
}
.box_3_1 {
  width: 48%;
  height: 100%;
  color: #fff;
}
.box_3_1 div {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}
.box_3_1 > div span:last-child {
  color: #00ff00;
}
.box_4_1 {
  width: 100%;
  height: 30px;
  color: #b3b3b3;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 5px 8px;
  box-sizing: border-box;
}
.box_4_1 span {
  display: block;
  width: 33.3%;
  /* text-align: center; */
}
.box4_border {
  width: 100%;
  height: 30px;
  color: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-bottom: 1px solid red;
  padding: 5px 8px;
  box-sizing: border-box;
}

.box_color {
  color: yellow !important;
}
.box_color1 {
  color: #ff5151 !important;
}
.box_color2 {
  color: #fff !important;
}

.color_g {
  color: #00dc00 !important;
}

.color_r {
  color: #ff210d !important;
}
</style>
